<template>
    <div class="infinite-list-wrapper" style="overflow:auto">
        <el-card  >
            <el-row :gutter="7" >
                <el-col  v-infinite-scroll="load"
                infinite-scroll-disabled="disabled"

                           class="col list" :span="8" v-for="item in news" :key="item.id" style="margin-bottom: 20px">

                    <div style="border: 1px solid #ccc; padding-bottom: 10px;height:250px">
                        <a :href="'https://china.nba.cn/article/index.htm?articleId='+item.news_id" style="cursor: pointer;"> <img :src="item.thumbnail_2x" alt="" style="width: 100%"  /></a>


                        <div style="color: #666; padding: 10px"><span class="title1">{{ item.title }}</span></div>
                        <i style="margin-left:180px;margin-top:-2px;font-size:12px;position:absolute;"><b></b>{{item.publish_time}}</i>
                    </div>
                </el-col>
                <p v-if="loading">加载中...</p>
                <p v-if="noMore">没有更多了</p>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'Article',
        data: function () {
            return {
                news: [],
                loading: false

            }
        },
        created() {


        },
        mounted() {
            this.request.get("/tripartite/dailyNews").then(res => {
                this.news = res.data
                console.log(res)
            })
        },
        computed: {
            noMore () {
                return this.news.length >= 10
            },
            disabled () {
                return this.loading || this.noMore
            }
        },
        methods: {
            load () {
                this.loading = true
                setTimeout(() => {
                    return this.news.length += 2
                    this.loading = false
                }, 2000)
            }
        }
    }

</script>
<style scoped>

    .title1:hover{
        color: green;
        cursor: pointer;
    }

    .col {
        box-shadow: 0 0 0px #ccc;
        transition: all 0.5s;

    }

    .col:hover {
        box-shadow: 0px 5px 10px #777;
    }

</style>
